<template>
  <div class="about">
    <div class="about-title">
      <span class="tabitem border-bottom">门票</span>
      <span class="tabitem">景区服务</span>
      <span class="tabitem">一日游</span>
      <span class="tabitem">热销门票</span>
    </div>
    <div class="list"  v-for="item of ticketList" :key="item.id" >
      <h3 class="titck-type" >
        <span class="iconfont ld">&#xe63f;</span>
         {{item.name}}
      </h3>
      <div class="type-info border-bottom" v-for="scer of item.children" :key="scer.id" >
        <div @click="foldHide(scer.id)">
          <h5 class="type-name">{{scer.name}}</h5>
          <div class="type-price">
             <em class="price-num">¥ {{scer.lowerPrice}}</em>
             <span class="numword">起</span>
             <span class="cc iconfont">&#xe6aa;</span>
          </div>
        </div>
        <tick-home :sev="scer.children" v-show="isShow.includes(scer.id)"></tick-home>
      </div>
    </div><!--list -->
  </div> <!--about -->
</template>

<script>
import TickHome from '@/components/Tick.vue'
export default {
  name: 'DetailsAbout',
  components: {
    TickHome
  },
  props: {
    ticketList: Array
  },
  data () {
    return {
      isShow: []
    }
  },
  methods: {
    foldHide (id) {
      if (!this.isShow.includes(id)) {
        this.isShow.push(id)
      } else {
        let newIds = this.isShow.filter((scer) => {
          return scer !== id
        })
        this.isShow = newIds
      }
    }
  }
}
</script>

<style lang="stylus" scoped="scoped">
  .about
    position relative
    background #FFFFFF
    margin-bottom 0.2rem
    .titck-type
      overflow hidden
      position relative
      z-index 1
      margin-bottom -.02rem
      padding 0 .2rem
      height .88rem
      background #fff
      color #333
      font-size .32rem
      line-height .88rem
      text-indent .4rem
      .ld
        background #00BCD4
        color white
        border-radius 0.02rem
    .about-title
      position relative
      background-color #fff
      color #212121
      height .96rem
      line-height .96rem
      white-space nowrap
      overflow-x auto
      font-size 0.3rem
      .tabitem
        display inline-block
        height .92rem
        line-height .96rem
        width 2.4rem
        text-align center
        font-size .32rem
    .list
      .type-info
        z-index 2
        margin-bottom -.02rem
        padding-bottom 0.3rem
        background #fff
        .type-name
          margin-right 1.8rem
          color #333
          font-size .3rem
          line-height .48rem
          padding-left 0.2rem
        .type-price
          right .46rem
          color #ff9800
          font-size .24rem
          overflow hidden
          height .4rem
          line-height .4rem
          float right
          margin-top: -0.5rem;
          .price-num
            margin-left .04rem
            font-size .4rem
          .numword
            color #666666
          .cc
            color #000000
</style>
